<template>
  <view>
    <navigator class="back" open-type="navigateBack" hover-class="none"
      >回</navigator
    >
    <!-- 1.0 商品滑动展示模块 -->
    <swiper class="swiper" indicator-dots indicator-active-color="#EB4450">
      <swiper-item v-for="(item, index) in pics" :key="item.pics_id">
        <image
          class="swiper_image"
          :src="item.pics_big_url"
          mode="aspectFit"
          @tap="previewImageHandle(index)"
        />
      </swiper-item>
    </swiper>
    <!-- 2.0 商品信息 -->
    <view class="info">
      <view class="info_head">
        <text class="price">{{ goods_price }}</text>
        <view class="opentype_button_wrap iconfont icon-zhuanfa">
          <button class="opentype_button" open-type="share">转发按钮</button>
        </view>
        <view @tap="collectHandle" class="iconfont icon-shoucang1"></view>
      </view>
      <view class="info_name">{{ goods_name }}</view>
    </view>
    <view class="divider"></view>

    <!-- 3.0 图文详情 -->
    <view class="detail">
      <view class="detail_head">图文详情</view>
      <!-- rich-text 类似于 v-html -->
      <rich-text :nodes="goods_introduce"></rich-text>
    </view>

    <!-- 4.0 底部固定栏-->
    <view class="bottom">
      <view class="opentype_button_wrap icon_item">
        <button class="opentype_button" open-type="contact">联系客服</button>
        <view class="iconfont icon-kefu"></view>
        <text class="icon_item_text">联系客服</text>
      </view>
       <!-- 由于购物车是 TabBar 页，跳转过去后就没有返回箭头了 -->
      <navigator
        open-type="switchTab"
        url="/pages/cart/main"
        hover-class="none"
        class="icon_item"
      >
        <view class="iconfont icon-gouwuche"></view>
        <text class="icon_item_text">购物车</text>
      </navigator>
      <view @tap="addCartHandle" class="button_item">加入购物车</view>
      <view class="button_item">立即购买</view>
    </view>
  </view>
</template>

<script>
// 导入获取详情页的
import { getGoodsDetail } from "@/api";
import { i } from "@dcloudio/vue-cli-plugin-uni/packages/postcss/tags";
export default {
  data() {
    return {
      goods_id: "",
      pics: [],
      goods_price: "",
      goods_name: "",
      goods_introduce: "",
      goods_small_logo: ""
    };
  },
  // 小程序中可通过 onLoad 生命周期函数获取页面传递过来的参数
  onLoad({ goods_id }) {
    // 页面参数中的 goods_id
    this.goods_id = goods_id;
    // 获取详情页数据
    this.getGoodsDetailData();
  },
  methods: {
    async getGoodsDetailData() {
      // 传递 id 获取商品详情数据
      const res = await getGoodsDetail({ goods_id: this.goods_id });
      // 提取出页面渲染所需的数据即可
      let {
        pics,
        goods_price,
        goods_name,
        goods_small_logo,
        goods_introduce
      } = res.data.message;
      // 按需绑定到 data 中
      this.pics = pics;
      this.goods_price = goods_price;
      this.goods_name = goods_name;
      this.goods_small_logo = goods_small_logo;
      //获取系统信息
      const { system } = uni.getSystemInfoSync();

      // 把系统信息先转换成小写，在判断是否包含 ios 关键词，如果包含说明是 IOS 平台
      const isIOS = system.toLowerCase().includes("ios");

      // 如果是 IOS 平台，就把 webp 图片地址，替换成 jpg 地址
      if (isIOS) {
        goods_introduce = goods_introduce.replace(/\.webp/g, ".jpg");
      }
      // 1️⃣ 由于富文本组件无法通过 img 选择器选中图片，只支持类名选择器
      this.goods_introduce = goods_introduce.replace(
        /<img/g,
        '<img class="rich_img"'
      );
    },
    // 调用预览大图的功能
    previewImageHandle(current) {
      // 由于后端返回的数据不符合小程序接口的格式要求，所以需要 map 处理一下再使用
      const urls = this.pics.map(item => item.pics_big);
      // console.log(urls);
      // 🧨注意：urls 参数规定：数组的每一项必须是字符串
      uni.previewImage({
        current, // 当前显示图片的http链接
        urls: urls // 需要预览的图片http链接列表
      });
    },
    // 点击收藏按钮
    collectHandle() {
      //提示用户功能升级中
      uni.showToast({
        title: "功能升级中...",
        duration: 1000,
        icon: "none"
      });
    },
    // 加入购物车
    addCartHandle() {
      console.log("点击了加入购物车按钮");
      // 准备好购物车数组，如果本地储存有就使用本地储存，没有就初始化空数组
      const cartList = uni.getStorageSync("cartList") || [];

      //判断本地存储中，findIndex 查找是否已经添加过当前商品
      const index = cartList.findIndex(item => item.goods_id === this.goods_id);
      //情况1：返回 -1，当前商品没有添加到购物车列表中
      // 情况2：返回 商品的索引
      if (index === -1) {
        //把商品信息加入到购物车数组中
        cartList.push({
          goods_id: this.goods_id,
          goods_price: this.goods_price,
          goods_name: this.goods_name,
          goods_small_logo: this.goods_small_logo,
          goods_selected: true,
          goods_count: 1
        });
      } else {
        cartList[index].goods_count += 1;
      }

      //储存到本地
      uni.setStorageSync("cartList", cartList);

      // 在界面层，给用户提示
      uni.showToast({
        title: "加入成功",
        duration: 1000, // 提示的持续时间
        mask: true // 设置透明蒙层，防止用户连续点击加入购物车
      });
    }
  }
};
</script>

<style lang="less">
.back {
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0.7);
  position: fixed;
  left: 40rpx;
  top: 60rpx;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 50%;
}
.swiper,
.swiper_image {
  width: 750rpx;
  height: 750rpx;
}
.info {
  padding: 20rpx;
  .info_head {
    display: flex;
    .price {
      flex: 1;
      font-size: 36rpx;
    }
    .iconfont {
      font-size: 40rpx;
      color: #666;
      margin-left: 20rpx;
    }
  }
  .info_name {
    margin-top: 20rpx;
    font-size: 30rpx;
    line-height: 1.5;
  }
}
.detail {
  //商品图文详情
  .detail_head {
    height: 88rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // 通过类名，去除图片底部缝隙
  .rich_img {
    vertical-align: top;
  }
}
// 4.0 底部固定栏
.bottom {
  border-top: 1rpx solid #ddd;
  height: 96rpx;
  position: fixed;
  width: 750rpx;
  background-color: #fff;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20rpx;
  box-sizing: border-box;
  .icon_item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .iconfont {
      font-size: 44rpx;
    }
    .icon_item_text {
      font-size: 20rpx;
    }
  }
  .button_item {
    background-color: #fba923;
    width: 196rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 26rpx;
    border-radius: 30rpx;
    &:last-child {
      background-color: var(--mainColor);
    }
  }
}
</style>